
.navigation
{
    width: 100%; /* The menu should be the entire width of it's surround object, in this case the whole page. Adjust it to see other results. */
    background-color: #666; /* sets a dark grey background color */
}

.navigation ul
{
    margin: 0; /* sets the margins to 0 */
    padding: 0; /* sets paddings to 0 */
    float: left; /* makes the object float left. In this case it's the unordered list */
}

.navigation ul li
{
    display: inline; /* makes the list items appear on one line instead of descending order. */
}

.navigation ul li a
{
    float: left;
    text-decoration: none; /* removes underline from the links */
    color: #fff; /* text color of the links */
    padding: 10px 11px; /* 10px of padding to the right and left. 11px of padding to the top and bottom. */
    background-color: #666; /* sets background color. */
}

.navigation ul li a:visited
{
    color: #fff;
    text-decoration: none;
}

.navigation ul li a:hover
{
    color: #fff;
    background-color: #333; /* changes the background color of the list item you hover over */
}

.navigation ul li.current a, .navigation ul li.current
{
    color: #000; /* text color of the links */
    background-color: #ccc; /* sets background color. */
}
